<template>
  <div>
    <h4>基本信息</h4>
    <el-form :inline="true" size="small" :model="searchForm" class="demo-form-inline" style="font-weight: bolder;text-align: left">
      <el-form-item label="客户名称">
        <el-input v-model="searchForm.customers.name" placeholder="请输入客户名称"></el-input>
      </el-form-item>
      <el-form-item label="手机号码">
        <el-input v-model="searchForm.customers.phone" placeholder="请输入手机号码"></el-input>
      </el-form-item>

      <el-form-item label="邮箱">
        <el-input v-model="searchForm.customers.email" placeholder="请输入邮箱"></el-input>
      </el-form-item>

      <el-form-item label="住址">
        <el-input v-model="searchForm.customers.address" placeholder="请输入住址"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="getSearchForm" icon="el-icon-search">查询</el-button>
        <el-button type="primary" @click="openSave" icon="el-icon-plus">添加</el-button>
      </el-form-item>
    </el-form>
    <h4>客户信息</h4>
    <el-table
        :data="tableData"
        style="width: 100%">
      <el-table-column
          prop="id"
          label="客户id">
      </el-table-column>

      <el-table-column
          prop="name"
          label="客户名称">
      </el-table-column>

      <el-table-column
          prop="email"
          label="邮箱">
      </el-table-column>

      <el-table-column
          prop="phone"
          label="手机号">
      </el-table-column>

      <el-table-column
          prop="address"
          label="住址">
      </el-table-column>



      <el-table-column
          prop="createdAt"
          label="创建时间">
      </el-table-column>

      <el-table-column
          label="操作"
          align="center"
          width="260"
          class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="openSave(scope.row)"
          >修改
          </el-button>
          <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
          >删除
          </el-button>



        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="searchForm.pageNum"
        :page-sizes="[5,10,30,40]"
        :page-size="searchForm.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="searchForm.total">
    </el-pagination>
    <el-dialog
        title="添加用户"
        :visible.sync="dialogVisible"
        width="45%">

      <el-form :model="saveFrom" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-row>
          <el-col span="10">
            <el-form-item label="客户名称" prop="name">
              <el-input v-model="saveFrom.name" placeholder="请输入客户名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col span="10">
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="saveFrom.email" placeholder="请输入邮箱"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col span="10">
            <el-form-item label="电话号码" prop="phone">
              <el-input v-model="saveFrom.phone" placeholder="请输入电话号码"></el-input>
            </el-form-item>
          </el-col>
          <el-col span="10">
            <el-form-item label="住址" prop="email">
              <el-input v-model="saveFrom.address" placeholder="请输入住址"></el-input>
            </el-form-item>
          </el-col>
        </el-row>



      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="saveEmp">确 定</el-button>
  </span>
    </el-dialog>


  </div>
</template>

<script>


import {
  search,
  handleDelete,
  saveEmp,
  handleUpdate,


} from "@/api/customer";

export default {
  name: "CustomersView",
  data() {
    return {
      rules: {
        name: [
          { required: true, message: '请输入客户名称', trigger: 'blur' },
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
        ],
        phone: [
          { required: true, message: '请输入电话号码', trigger: 'blur' },
        ],
        address: [
          { required: true, message: '请输入住址', trigger: 'blur' },
        ],

      },
      saveFrom: {
        id:'',
        name: '',
        email: '',
        phone: '',
        address: ''
      },
      dialogVisible: false,

      searchForm: {
        pageNum: 1,
        pageSize: 5,
        total: '',
        pages: 1,
        customers: {
          name: "",
          email: "",
          phone: "",
          address: ""
        }
      },
      tableData: [],



    };
  },
  created() {
    this.getPage()

  },
  methods: {


    saveEmp() {

      let that = this
      if (that.saveFrom.id != null && that.saveFrom.id != '') {
        handleUpdate(that.saveFrom).then(function (data) {
          if (data.code == 200) {
            that.$message.success(data.mess)
            that.getPage()

          } else {
            that.$message.error(data.mess)
          }
          that.dialogVisible = false
        })
      } else {
        saveEmp(that.saveFrom).then(function (data) {

          if (data.code == 200) {
            that.$message.success(data.mess)
            that.getPage()
          } else {
            that.$message.error(data.mess)
          }
          that.dialogVisible = false
        })
      }
      that.dialogVisible = false
    },
    openSave(row) {
      let that = this
      this.dialogVisible = true
      if (row.id != null && row.id != '') {
        that.saveFrom = row
      } else {
        this.saveFrom = {}
      }


    },
    handleDelete(row) {
      let that = this
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        handleDelete(row.id).then(function (data) {
          if (data.code == 200) {
            that.$message.success(data.mess)
            that.getPage()
          } else {
            that.$message.error(data.mess)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    handleSizeChange(size) {
      let that = this
      that.searchForm.pageSize = size
      that.getPage()
    },
    handleCurrentChange(num) {
      let that = this
      that.searchForm.pageNum = num
      that.getPage()
    },
    getSearchForm() {
      this.searchForm.pageNum = 1
      this.getPage()
    },

    getPage() {
      let that = this
      search(that.searchForm).then(function (data) {

        if (data.code == 200) {
          that.tableData = data.data.records
          that.searchForm.pages = data.data.pages
          that.searchForm.total = data.data.total
          that.searchForm.pageSize = data.data.size
          that.searchForm.pageNum = data.data.current
        }
      })
    },

  }
};
</script>

<style rel="stylesheet/scss" lang="scss">

</style>
